/**
* Created by fish on 2019/6/12.
*
* BoardBox
*/

<style scoped>
.draw_board {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /*box-shadow: 0 0 5px 2px rgba(0, 0, 0, .1);*/
  z-index: 100;
} 
.draw_body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
}
.drawHandleWrap{
  width: 100%;
  height: 100px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 90px;
  background-color: #fff;
  z-index: 9999;
  box-shadow: 0 0 10px rgba(0,0,0,.16);
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,.16);
  border-radius: 2px;
  -webkit-border-radius: 2px;
  padding: 20px 70px;
}
.drawScreenHandleWrap{
  width: 480px;
  height: 100px;
  position: absolute;
  right: 618px;
  bottom: 90px;
  background-color: #fff;
  z-index: 9999;
  box-shadow: 0 0 10px rgba(0,0,0,.16);
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,.16);
  border-radius: 2px;
  -webkit-border-radius: 2px;
  padding: 5px 0 20px;
}
.clearTipsModal{
  width: 568px;
  height: 270px;
  background-color: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -135px;
  margin-left: -284px;
  z-index: 9999999;
}
.clearTipsModalInner{
  position: relative;
  width: 100%;
  height: 100%;
  padding: 30px 40px;
  box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
  -webkit-box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
}
.clearTipsModal .title{
  font-size: 24px;
  color: #333;
}
.clearTipsModal .content{
  font-size: 24px;
  line-height: 32px;
  text-align: left;
  margin-top: 10px;
  height: 113px;
}
.clearTipsModal .content img{
  margin-right: 16px;
}
.clearTipsModal .modalFooter{
  text-align: right;
}
.clearTipsModal a{
  line-height: 52px;
  width: 110px;
  display: inline-block;
  font-size: 24px;
  color: #333;
  text-align: center;
}
.clearTipsModal .clearCanvas{
  background-color: #006dff;
  color: #fff;
  font-size: 24px;
  margin-left: 10px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
}
</style>
<template>
  <div class="draw_board" :style="boardStyle" @click="handleBoardClick">
    <div class="drawHandleWrap">
      <div class="pen_wrap" v-clickoutside="closePenColorPick">
        <div @click.stop="showPenPick=!showPenPick">
          <a href="javascript:void(0);" class="draw_hander pen" @click.stop="pencilFn" :class="{active:activeTool && activeTool.name === 'pencil'}"></a>
          <div class="penColor">
            <div >
              <span class="colorSelected" :style="'background-color:'+penColorActive"></span>
              <span class="arrow"></span>
            </div>
            <!-- 画笔设置 -->
            <div class="pen_color_wrap" v-show="showPenPick">
              <div class="pen_color_inner">
                <div class="color_pick_title">画笔设置</div>
                <div class="color_pick_body">
                    <div class="color_pick_item">
                      <p>大小</p>
                      <div class="color_pick_content pl20" style="height: 70px">
                        <Slider v-model="penSize" show-tip="never" show-input :max="10" :min="1" input-size="large" @on-change="penSizeChange"></Slider>
                      </div>
                    </div>
                    <div class="color_pick_item mt20">
                      <p>颜色</p>
                      <div class="color_pick_content cf">
                        <a href="javascript:void(0);" @click="penColorPick(value)" class="colorBlock" :class="{active: penColorActive==value}" v-for="(value,index) in penColorData" :key="index" :style="'background-color:'+value"></a>                    
                      </div>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="draw_handle_btn">
        <a href="javascript:void(0);" :class="{active:activeTool && activeTool.name === 'eraser'}" @click="eraserFn" class="draw_hander d_eraser"></a>
        <a href="javascript:void(0);" @click="undo" class="draw_hander d_back"></a>
        <a href="javascript:void(0);" @click="redo" class="draw_hander d_forword"></a>
        <a href="javascript:void(0);" @click="openGrid" class="draw_hander d_canvas"></a>
        <a href="javascript:void(0);" @click="clear" class="draw_hander d_clear"></a>
      </div>
      <div class="draw_bg_wrap" v-clickoutside="closeBgColorPick">
        <div @click="showBgColorSet=!showBgColorSet">
          <div>
            <span class="colorSelected" :class="{transparent:bgColorActive==4}" :style="'background-color:'+bgColorActive"></span>
            <span class="arrow"></span>
          </div>
          <div class="pen_color_wrap" v-show="showBgColorSet">
            <div class="pen_color_inner">
              <div class="color_pick_title">背景色设置</div>
              <div class="color_pick_body">
                  <div class="color_pick_item">
                    <p>颜色</p>
                    <div class="color_pick_content cf">
                      <a href="javascript:void(0);" @click="bgColorPick(value)" class="colorBlock" :class="{active: bgColorActive==value,transparent:index==4}" v-for="(value,index) in bgColorArr" :key="index" :style="'background-color:'+value"></a>                    
                    </div>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="draw_body" ref="boardBody">
      <!-- 画板 -->
      <SignaturePad ref="signaturePad" :options="currentBoard.signaturePad.options" :style="padStyle"></SignaturePad>   
    </div>  
     <!-- 栅格 -->
    <GridBox ref="gridBox" @close="handleGridBoxClose"></GridBox>

    <!-- clear 提示 -->
    <div class="clearTipsModal" v-if="showCleartips">
      <div class="clearTipsModalInner">
        <div class="title">提示</div>
        <div class="content"><img src="static/draw/images/clearTips.png">是否清除当前画板？</div>
        <div class="modalFooter">
          <a href="javascript:void(0);" @click="showCleartips=false" class="cancel">取消</a>
          <a href="javascript:void(0);" @click="clearCanvas" class="clearCanvas">清除</a>
        </div>
      </div>
    </div>
    <!-- 关闭提示 -->
    <div class="clearTipsModal" v-if="showCloseCanvasTips">
      <div class="clearTipsModalInner">
        <div class="title">提示</div>
        <div class="content"><img src="static/draw/images/clearTips.png">是否关闭画板？关闭之后不会保存所有画板内容！</div>
        <div class="modalFooter">
          <a href="javascript:void(0);" @click="showCloseCanvasTips=false" class="cancel">取消</a>
          <a href="javascript:void(0);" @click="closeCanvas" class="clearCanvas">确定</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import SignaturePad from './signaturePad/index.vue';
import ToolBox from './ToolBox/Index.vue';
import ToolItem from './ToolBox/ToolItem.vue';
import GridBox from './GridBox/Index.vue';
import html2canvas from 'html2canvas'

export default {
  name: 'Board',
  components: {
    SignaturePad,
    ToolBox,
    ToolItem,
    GridBox
  },
  props: {
    info: Object
  },
  data () {
    return {
      showPenPick: false,//默认 不显示画笔设置

      showBgColorSet: false,//是否显示背景色

      showCleartips: false,// 清除提示弹窗
      showCloseCanvasTips: false,//关闭提示弹窗
      

      tools: {
        common: [   
          {
            name: 'pencil',
            label: 'Pencil (P)',
            lang: 'L10003',
            icon: 'pencil',
            shortcuts: 'p',
            cursor: '',
            enable: true,
            contextmenu: true,
            type: 'draw',
            types: ['draw', 'line', 'text', 'note', 'preview'],
            divider: false
          },{
            name: 'eraser',
            label: 'Eraser (E)',
            lang: 'L10006',
            icon: 'eraser',
            shortcuts: 'e',
            cursor: '',
            enable: true,
            contextmenu: true,
            type: 'draw',
            types: ['draw', 'line', 'text', 'note', 'preview'],
            divider: false
          },
        ], 
         penColor: {
          name: 'penColor',
          label: 'Pencil color',
          lang: 'L10013',
          icon: '',
          shortcuts: '',
          cursor: '',
          enable: true,
          contextmenu: false,
          type: '',
          types: ['draw', 'line'],
          divider: false
        },  
      },
      // 当前激活工具
      activeTool: null,
      // 当前操作类型 draw: 绘画 note 便签 preview 预览
      actionType: null,
    }
  },
  computed: {
    ...mapGetters({
      activeBoardIndex:'draw/activeBoardIndex',
      boardList:'draw/boardList',
      defBoard:'draw/defBoard',
      bgColorArr:'draw/bgColorArr',
      penColorData:'draw/penColorData'
    }),
    currentBoard () {
      let _t = this
      if (_t.boardList[_t.activeBoardIndex]) {
        return _t.boardList[_t.activeBoardIndex]
      }
      return _t.defBoard;
    },
    penSize:{
      get(){
        return this.currentBoard.formData.dotSize;
      },
      set(val){
        this.currentBoard.formData.dotSize = val
      }
    },
    penColorActive(){
      return this.currentBoard.formData.penColor;
    },
    bgColorActive(){
      return this.currentBoard.formData.backgroundColor;
    },
    boardBody () {
      return this.$refs.boardBody;
    },
    signaturePad () {
      return this.$refs.signaturePad;
    },
    gridBox () {
      return this.$refs.gridBox;
    },
    boardStyle () {
      let _t = this
      let style = {}
      if (_t.active) {
        style = {
          zIndex: 200
        }
      } else {
        style = {
          zIndex: 100
        }
      }
      return style;
    },
    padStyle () {
      let _t = this
      let style = {
        cursor: 'auto'
      }
      if (_t.activeTool) {
        if (['pencil', 'eraser'].includes(_t.activeTool.name)) {
          let png = require('@/assets/images/64/' + _t.activeTool.name + '.png')
          style = {
            cursor: `url(${png}) 32 32, auto`
          }
        } else if (_t.activeTool.cursor) {
          style = {
            cursor: _t.activeTool.cursor
          }
        }
      }
      return style
    }
  },
  methods: {
    init () {
      let _t = this
      this.penSize = this.currentBoard.formData.dotSize;
      // 处理工具激活
      _t.handleActiveTool('pencil')
    },
    handleActiveTool (name, defName) {
      let _t = this;
      let item = _t.tools.common.find(target => target.name === name && target.enable);
      let defItem = _t.tools.common.find(target => target.name === defName && target.enable);
      item = item || defItem;
      if (item) {
        _t.activeTool = item;
        _t.actionType = item.type;
      } else {
        _t.activeTool = null;
        _t.actionType = null;
      }
    },
    /**
     * 选择画笔
     */
    pencilFn(){
      let _t = this;
      let el = _t.signaturePad;
      _t.handleActiveTool('pencil');
      el.on()
      el.setOption('dotSize', _t.currentBoard.formData.dotSize);
      el.setOption('minWidth', _t.currentBoard.formData.dotSize * 0.3);
      el.setOption('maxWidth', _t.currentBoard.formData.dotSize * 1.7);
      el.setOption('penColor', _t.currentBoard.formData.penColor);
      
      // 取消直线模式
      el.setOption('straightLine', false);
      el.draw();
    },
    /**
     * 撤回
     */
    undo(){
      let el = this.signaturePad;
      el.undo();
    },
    /**
     * 前进
     */
    redo(){
      let el = this.signaturePad;
      el.redo();
    },
    /**
     * 字体大小
     */
    penSizeChange(val){
      let el = this.signaturePad;
      el.setOption('dotSize', val)
      el.setOption('minWidth', val * 0.3)
      el.setOption('maxWidth', val * 1.7)
    },
    /**
     * 颜色选择
     */
    penColorPick(value){
      this.pencilFn();
      let _t = this;
      let el = _t.signaturePad;
      _t.currentBoard.formData.penColor = value;
      el.setOption('penColor', value);
      el.setOption('dotSize', this.penSize);
      el.setOption('minWidth', this.penSize * 0.3)
      el.setOption('maxWidth', this.penSize * 1.7)
    },
    /**
     * 背景色选择
     */
    bgColorPick(value){
      if(value=='transparent'){
        document.body.style.backgroundColor='transparent';
      }else{
        document.body.style.backgroundColor='#fff';
      }
      this.pencilFn();
      let _t = this;
      let el = _t.signaturePad;
      _t.currentBoard.formData.backgroundColor = value;
      // 设置背景图
      el.setOption('backgroundColor', value);
      el.setOption('dotSize', this.penSize);
      el.setOption('minWidth', this.penSize * 0.3)
      el.setOption('maxWidth', this.penSize * 1.7)
      // 清除画布
      el.clear();
    },
    /**
     *  清除
     */
    clear(){
      this.showCleartips =  true;
    },
    /**
     * 清除画布确定
     */
    clearCanvas(){
      let el = this.signaturePad;
      el.clear();
      this.showCleartips =  false;
    },
    /**
     * 橡皮檫
     */
    eraserFn(){
      let _t = this;
      let el = _t.signaturePad;
      _t.handleActiveTool('eraser');
      el.on();
      
      el.setOption('dotSize', 18);
      el.setOption('minWidth', 18);
      el.setOption('maxWidth', 18);
      el.setOption('penColor',  _t.currentBoard.formData.backgroundColor);
      el.eraser();   
    },
    /**
     * 打开栅格 画布
     */
    openGrid(){
      let _t = this;
      _t.switchStatus(false)
      // 截图
      html2canvas(_t.boardBody, {
        backgroundColor: null,
        imageTimeout: 0
      }).then(function (canvas) {
        let data = canvas.toDataURL('image/png');
        if (_t.gridBox && _t.gridBox.doShow) {
          _t.gridBox.doShow(data)
        }
      }).catch(function (error) {
        console.warn('html2canvas render error!', error)
      })
    },
    // 切换状态
    switchStatus (val, key) {
      let _t = this
      if (key !== undefined) {
        _t.currentBoard.status[key] = val !== undefined ? val : !_t.currentBoard.status[key]
      } else {
        let keys = Object.keys(_t.currentBoard.status)
        for (let i = 0, len = keys.length; i < len; i++) {
          let k = keys[i]
          _t.currentBoard.status[k] = val !== undefined ? val : !_t.currentBoard.status[k]
        }
      }
    },
    /**
     * 关闭grid
     */
    handleGridBoxClose () {
      let _t = this
      // 切换状态
      _t.switchStatus(true)
    },
    handleBoardClick () {
      this.doHideContextMenu();
    },
    doHideContextMenu () {
      let _t = this;
      if (_t.contextMenu && _t.contextMenu.doHide) {
        _t.contextMenu.doHide();
      }
    },
    /**
     * 关闭铅笔颜色选框
     */
    closePenColorPick(){
      this.showPenPick = false;
    },
    /**
     * 关闭背景色选框
     */
    closeBgColorPick(){
      this.showBgColorSet = false;
    },
    closeCanvas(){
    },
  },
  created () {
    let _t = this;
    _t.init();
  }
}
</script>
